<template>
    <view class="card-group-cell">
        <text class="label">{{ label }}</text>
        <image mode="aspectFill" v-if="isImgView" class="image" :src="value"></image>
        <input
            v-if="isInputView"
            class="input"
            :value="value"
            :type="inputType"
            v-model="model"
            :placeholder="placeholder" />
        <iconsfont
            @click="scan()"
            v-if="sao && !isShowRight"
            customIcons="icon-saoyisao1"
            class="saoclass"
            color="#32A1FF"
            size="32"></iconsfont>
        <view v-if="isDefalut()">
            <text class="value" v-if="value" :class="className">{{ value }}</text>
        </view>
        <view v-if="isRadioView">
            <radio-group @change="change">
                <label v-for="(radio, index) in radioItems" :key="index">
                    <radio
                        class="radio"
                        :value="radio.value"
                        :checked="value == radio.value"
                        :color="easyGetColor()"></radio>
                    <text>{{ radio.text }}</text>
                </label>
            </radio-group>
        </view>
        <uni-icons class="icon" type="arrowright" v-if="isShowRight"></uni-icons>
    </view>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: "",
        },
        value: {
            type: String,
            default: "",
        },
        inputType: {
            type: String,
            default: "text",
        },
        isShowRight: {
            type: Boolean,
            default: true,
        },
        isImgView: {
            type: Boolean,
            default: false,
        },
        isInputView: {
            type: Boolean,
            default: false,
        },
        isRadioView: {
            type: Boolean,
            default: false,
        },
        radioItems: {
            type: Array,
            default: () => [],
        },
        type: {
            type: String,
            default: "text",
        },
        placeholder: {
            type: String,
            default: "",
        },
        className: {
            type: String,
            default: "",
        },
        sao: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            model: "",
            selectRadio: "",
        }
    },
    mounted() {
        this.model = this.value
        if (this.isRadioView) {
            this.selectRadio = this.value
        }
    },
    methods: {
        isDefalut() {
            return !this.isImgView && !this.isInputView && !this.isRadioView
        },
        getValue() {
            return this.model
        },
        change(e) {
            console.log(e)
            this.selectRadio = e.detail.value
        },
        getSelectRadio() {
            return this.selectRadio
        },
        scan() {
            let that = this
            //扫一扫
            // 允许从相机和相册扫码
            uni.scanCode({
                success: function (res) {
                    that.model = res.result
                },
            })
        },
    },
}
</script>

<style lang="scss">
.card-group-cell {
    min-height: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $app-page-padding $app-page-padding $app-page-padding 0;
    margin-left: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        // border-bottom: 0;
    }

    .label {
        flex: 1;
        white-space: nowrap;
        margin-right: 20rpx;
    }

    .value {
        display: flex;
        align-items: center;
    }

    .icon {
        margin-left: 10rpx;
        margin-top: 4rpx;
    }

    .image {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
    }

    .input {
        text-align: right;
        font-size: $font-size-24;
        border: 0;
        outline: none;
    }
    .jend {
        text-align: right;
    }
}
.saoclass {
    margin-left: 24rpx;
}
</style>
